import React, { Component } from 'react'
import { Spin, Button, Empty } from 'antd'
import FileSaver from 'file-saver'

import { address } from '@/Utils/apiConfig'
import request from '@/Utils/fecth'

import './Home.less'

export default class ChainCodeHome extends Component {
  state = {
    fabric: [],
    quorum: [],
  }

  componentDidMount() {
    this.getContractList()
  }

  async getContractList() {
    this.setState({
      loading: true,
    })
    const { status, data = {}} = await request().get(address.chaincode.getContractList)
    this.setState({
      loading: false,
    })
    if (status === 200) {
      this.setState({
        fabric: (data.fabric || []),
        quorum: data.quorum || [],
      })
    }
  }

  async download(type, v) {
    const { status, data, headers } = await request().get(address.chaincode.download, {
      responseType: 'blob',
      params: {
        type: encodeURIComponent(type),
        name: encodeURIComponent(v.identification),
        language: encodeURIComponent(v.language),
      },
    })
    if (status === 200) {
      const reg = new RegExp('"', 'g')
      const fileName = decodeURIComponent(headers['content-disposition']
        .split(';')[1]
        .split('filename=')[1]
        .replace(reg, ''))
      FileSaver.saveAs(data, fileName)
    }
  }

  goDetail = (type, v) => {
    this.props.history.push({
      pathname: `/dashboard/chainCode/list/${type}/${v.language}/${v.identification}/detail`,
    })
  }

  render() {
    const { loading, fabric, quorum } = this.state
    return <div className="ChainCodeHome">
      <Spin spinning={loading}>
        <div className="containerList">
          <div className="list-title">Fabric</div>
          {
            fabric.length > 0 &&
            <div className="list">
              {
                fabric.map((v, i) => {
                  return <div key={i} className="chaincode-item">
                    <div className="item-title">{v.name}</div>
                    <div className="info-list">
                      <div className="info-item">
                        <span className="title">描述</span>
                        <span className="info-content">{v.desc}</span>
                      </div>
                      <div className="info-item">
                        <span className="title">版本</span>
                        <span className="info-content">{v.version}</span>
                      </div>
                      <div className="info-item">
                        <span className="title">编写语言</span>
                        <span className="info-content">{v.language}</span>
                      </div>
                    </div>
                    <div className="handle">
                      <Button onClick={() => this.goDetail('fabric', v)} type="primary">查看详情</Button>
                      <Button onClick={() => this.download('fabric', v)} type="primary" className="ml15">下载</Button>
                    </div>
                  </div>
                })
              }
            </div>
          }
          {
            !fabric.length &&
            <div className="empty-list">
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </div>
          }
        </div>
        <div className="containerList">
          <div className="list-title">Quorum</div>
          {
            quorum.length > 0 &&
            <div className="list">
              {
                quorum.map((v, i) => {
                  return <div key={v.name} className="chaincode-item">
                    <div className="item-title">{v.name}</div>
                    <div className="info-list">
                      <div className="info-item">
                        <span className="title">描述</span>
                        <span className="info-content">{v.desc}</span>
                      </div>
                      <div className="info-item">
                        <span className="title">版本</span>
                        <span className="info-content">{v.version}</span>
                      </div>
                      <div className="info-item">
                        <span className="title">编写语言</span>
                        <span className="info-content">{v.language}</span>
                      </div>
                    </div>
                    <div className="handle">
                      <Button onClick={() => this.goDetail('quorum', v)} type="primary">查看详情</Button>
                      <Button onClick={() => this.download('quorum', v)} type="primary" className="ml15">下载</Button>
                    </div>
                  </div>
                })
              }
            </div>
          }
          {
            !quorum.length &&
            <div className="empty-list">
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </div>
          }
        </div>
      </Spin>
    </div>
  }
}
